<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四项费用审查</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/common.css') }}">
    <script src="{{ url_for('static', filename='js/fontawesome.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>
    <style>
        :root {
            --primary-color: #4a90e2;
            --primary-hover: #357abd;
            --menu-bg: #f8f9fa;
            --menu-hover: #e9ecef;
            --menu-width: 280px;
            --border-color: #dee2e6;
            --text-color: #343a40;
            --menu-text: #495057;
            --top-img-height: 150px;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: #f1f3f5;
        }

        .baseBody {
            display: flex;
        }

        /* 左侧菜单样式 */
        .menu {
            width: var(--menu-width);
            height: calc(100vh - var(--top-img-height));
            background-color: var(--menu-bg);
            color: var(--menu-text);
            position: fixed;
            left: 0;
            /* top: 0; */
            bottom: 0;
            z-index: 99;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-right: 1px solid var(--border-color);
        }

        .menu-header {
            padding: 24px;
            background: white;
            border-bottom: 1px solid var(--border-color);
        }

        .menu-title {
            font-size: 24px;
            font-weight: 600;
            color: var(--primary-color);
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .menu-title::before {
            content: '❖';
            margin-right: 8px;
            color: var(--primary-color);
            font-size: 20px;
            line-height: 1;
        }

        .menu-list {
            list-style: none;
            flex: 1;
            padding: 20px 16px;
        }

        /* 父级菜单项样式 */
        .menu-parent {
            margin-bottom: 10px;
            font-weight: 600;
            color: var(--text-color);
            font-size: 16px;
            padding: 12px 16px;
            background: rgba(74, 144, 226, 0.1);
            border-radius: 6px;
            display: flex;
            align-items: center;
            position: relative;
        }

        .menu-parent::before {
            content: '◈';
            margin-right: 8px;
            color: #333;
            font-size: 20px;
            line-height: 1;
        }

        .menu-parent i {
            margin-right: 8px;
            color: var(--primary-color);
        }

        /* 子菜单项样式 */
        .menu-item {
            margin: 4px 0;
            margin-left: 24px;
            border-radius: 6px;
            transition: all 0.3s;
            position: relative;
        }

        .menu-item::before {
            content: '';
            position: absolute;
            left: -12px;
            top: 50%;
            width: 6px;
            height: 1px;
            background-color: var(--border-color);
        }

        .menu-item:hover {
            background-color: var(--menu-hover);
        }

        .menu-item.active {
            background-color: var(--menu-hover);
        }

        .menu-item a {
            color: var(--menu-text);
            text-decoration: none;
            display: block;
            padding: 10px 16px;
            font-size: 14px;
            position: relative;
            transition: all 0.3s;
            border-radius: 6px;
        }

        .menu-item a {
            color: var(--menu-text);
            text-decoration: none;
            display: block;
            padding: 10px 16px;
            font-size: 14px;
            position: relative;
            transition: all 0.3s;
            border-radius: 6px;
        }

        .menu-item:hover a {
            color: var(--primary-color);
        }

        .menu-item.active a {
            color: var(--primary-color);
            font-weight: 500;
        }

        .menu-item span {
            color: var(--menu-text);
            text-decoration: none;
            display: block;
            padding: 10px 16px;
            font-size: 14px;
            position: relative;
            transition: all 0.3s;
            border-radius: 6px;
            cursor: pointer;
        }

        .menu-item:hover span {
            color: var(--primary-color);
        }

        /* 主内容区域样式 */
        .main-content {
            margin-left: var(--menu-width);
            flex: 1;
            padding: 24px;
            background-color: #f1f3f5;
            min-height: calc(100vh - var(--top-img-height));
            overflow: hidden;
        }

        /* 美化滚动条 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.02);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.15);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.2);
        }
    </style>
    <style>
        /* 菜单栏折叠样式 */
        .menu-list {
            list-style: none;
        }

        .menu-parent {
            cursor: pointer;
            display: flex;
        }

        .menu-parent::after {
            content: "";
            font-size: 12px;
            transition: transform 0.3s;
            margin-left: auto;
        }

        .menu-parent.collapsed::after {
            transform: rotate(-90deg);
        }

        .menu-item {
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .menu-item a {
            display: block;
            padding: 10px 16px;
            color: #333;
            text-decoration: none;
            transition: background-color 0.2s;
        }

        .menu-item a:hover {
            background-color: #f0f0f0;
        }

        .menu-item.active a {
            background-color: #e0e0e0;
            font-weight: bold;
        }

        .submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .submenu.expanded {
            max-height: 1000px; /* 足够大的值以容纳所有子项 */
        }

        .TopOptionsDszw {
            width: 100%;
            min-width: 1000px;
            height: var(--top-img-height);
        }

        .TopOptionsDs {
            width: 100%;
            min-width: 1000px;
            height: var(--top-img-height);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            background-image: url("../../static/img/top-beijing.png");
            background-size: cover;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 99;
        }

        .TopOptionsDs .TopOptionsDsTit {
            width: 800px;
            height: fit-content;
        }

        .TopOptionsDs .TopOptionsDsTit img {
            width: 100%;
            height: 100%;
        }

        .TopOptions {
            width: 100%;
            min-width: 1000px;
            height: auto;
            display: flex;
            justify-content: center;
            gap: 90px;
        }

        .TopOptions a{
            text-decoration: none;
        }

        .TopOptions .TopOptionsDiv {
            width: fit-content;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
        }

        .TopOptionsDiv .TopOptionsImg {
            width: 40px;
            height: 40px;
        }

        .TopOptionsImg img{
            width: 100%;
            height: 100%;
        }

        .TopOptionsDiv .TopOptionsTit {
            font-size: 16px;
            font-weight: 500;
            color: #212332;
        }
    </style>
    
    <style>
        .card-header .card-header_text {
            font-size: 20px !important;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto;
            margin-bottom: 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
    {% block head %}{% endblock %}
</head>
<body>

    <!-- 顶部区域 -->
    <div class="TopOptionsDszw">
        <div class="TopOptionsDs">
            <div class="TopOptionsDsTit"><img src="../../static/img/top-beijing-tit.png"></div>
            <div class="TopOptions">
                <a href="/Configure-search-parameters">
                    <div class="TopOptionsDiv">
                        <div class="TopOptionsImg"><img src="../../static/img/top-pzjscs.png"></div>
                        <div class="TopOptionsTit">配置检索参数</div>
                    </div>
                </a>
                <a href="/Perform-one-click-search">
                    <div class="TopOptionsDiv">
                        <div class="TopOptionsImg"><img src="../../static/img/top-zxyjjs.png"></div>
                        <div class="TopOptionsTit">执行一键检索</div>
                    </div>
                </a>
                <a href="/Institutional-documents">
                    <div class="TopOptionsDiv">
                        <div class="TopOptionsImg"><img src="../../static/img/top-zdwj.png"></div>
                        <div class="TopOptionsTit">制度文件</div>
                    </div>
                </a>
                <a href="/Mold-Wall-Operation-Manual">
                    <div class="TopOptionsDiv">
                        <div class="TopOptionsImg"><img src="../../static/img/top-mxczsc.png"></div>
                        <div class="TopOptionsTit">模型操作手册</div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div class="baseBody">
        <!-- 左侧菜单 -->
        <nav class="menu">
            <div class="menu-header">
                <h1 class="menu-title">四项费用审查</h1>
            </div>
            <ul class="menu-list">
                <li>
                    <div class="menu-parent">差旅费</div>
                    <ul class="submenu">
                        <li class="menu-item {% if active_page == 'travel_expense' %}active{% endif %}">
                            <a href="/travel-expense">1.标准限额内虚开住宿费模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'even_days_odd_cost' %}active{% endif %}">
                            <a href="/even-days-odd-cost">2.住宿天数为偶数但住宿费为奇数模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'high_speed_rail' %}active{% endif %}">
                            <a href="/high-speed-rail">3.超标准全额报销高铁动车费模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'other_transport' %}active{% endif %}">
                            <a href="/other-transport">4.超标准乘坐交通工具模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'flight_expense' %}active{% endif %}">
                            <a href="/flight-expense">5.乘坐飞机经济舱审批是否合规模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'traffic_allowance' %}active{% endif %}">
                            <a href="/traffic-allowance">6.报销在途期间外交通补助模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'own_vehicle' %}active{% endif %}">
                            <a href="/own-vehicle">7.自带车出差却报销交通补助模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'over_day' %}active{% endif %}">
                            <a href="/over-day">8.超天数报销交通补助模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'accommodation_expense' %}active{% endif %}">
                            <a href="/accommodation-expense">9.超标准报销住宿费模型</a>
                        </li>

                        <li class="menu-item {% if active_page == 'transport_subsidy' %}active{% endif %}">
                            <a href="/transport-subsidy">10.出差日期重叠重复报销模型</a>
                        </li>

                        <li class="menu-item {% if active_page == 'holiday_travel' %}active{% endif %}">
                            <a href="/holiday-travel">11.节假日出差模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'travel_destination' %}active{% endif %}">
                            <a href="/travel-destination">12、出差变更目的地不合理模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'meal_overstandard' %}active{% endif %}">
                            <a href="/meal-overstandard">13.超标准报销伙食补助模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'over_day_meal' %}active{% endif %}">
                            <a href="/over-day-meal">14.超天数报销伙食补助模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'invoice_duplicate' %}active{% endif %}">
                            <a href="{{ url_for('invoice_duplicate.invoice_duplicate') }}">15.一张发票多次报销模型</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <div class="menu-parent">
                        招待费
                    </div>
                    <ul class="submenu">
                        <li class="menu-item {% if active_page == 'weekend_holiday' %}active{% endif %}">
                            <a href="/weekend-holiday">1.节假日、周末发生招待模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'dining_receipt' %}active{% endif %}">
                            <a href="/dining-receipt">2.虚开业务招待发票模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'dining_sequence' %}active{% endif %}">
                            <a href="/dining-sequence">3.单一销方单位连号模型</a>
                        </li>

                        <li class="menu-item {% if active_page == 'entertainment_outside' %}active{% endif %}">
                            <a href="/entertainment-outside">4.公司管辖范围外发生业务招待费模型</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <div class="menu-parent">
                        会议费
                    </div>
                    <ul class="submenu">
                        <li class="menu-item {% if active_page == 'conference_people' %}active{% endif %}">
                            <a href="/conference-people" class="menu-link">1.主办会议人数超标模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'conference_day' %}active{% endif %}">
                            <a href="/conference-day" class="menu-link">2.主办会议天数超标模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'conference_expense' %}active{% endif %}">
                            <a href="/conference-expense" class="menu-link">3.主办会议金额超标模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'absence_huiyi' %}active{% endif %}">
                            <a href="/absence-huiyi" class="menu-link">4.外出会议未请假模型</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <div class="menu-parent">
                        职工教育费
                    </div>
                    <ul class="submenu">
                        <li class="menu-item {% if active_page == 'traffic_allowance_2' %}active{% endif %}">
                            <a href="/traffic-allowance-2">1.报销在途期间外交通补助模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'own_vehicle_2' %}active{% endif %}">
                            <a href="/own-vehicle-2">2.自带车出差却报销交通补助模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'over_day_2' %}active{% endif %}">
                            <a href="/over-day-2">3.超天数报销交通补助模型</a>
                        </li>
                        <!-- 'accommodation_expense_2' 没有这个参数暂时使用 null -->
                        <li class="menu-item {% if active_page == null %}active{% endif %}">
                            <a href="/accommodation-2">4.超标准报销住宿费模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'transport_subsidy_2' %}active{% endif %}">
                            <a href="/transport-subsidy-2">5.出差日期重叠重复报销模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'absence_peixun' %}active{% endif %}">
                            <a href="/absence-peixun">6.外出培训未请假模型</a>
                        </li>
                        <li class="menu-item {% if active_page == 'over_day_meal_2' %}active{% endif %}">
                            <a href="/over-day-meal-2">7.超天数报销伙食补助模型</a>
                        </li>
                    </ul>
                </li>

            </ul>
        </nav>
    </div>

    <!-- 主内容区域 -->
    <main class="main-content">
        {% block content %}{% endblock %}
    </main>

    {% block scripts %}{% endblock %}

    <script>

        $(document).ready(function() {
            // 初始化时检查是否有活动的菜单项，展开对应的父菜单
            $('.menu-list .menu-item').each(function() {
                if ($(this).hasClass('active') && !$(this).parent().parent().prev().hasClass('expanded')) {
                    $(this).closest('ul').prev().addClass('expanded').removeClass('collapsed');
                    $(this).closest('ul').addClass('expanded');
                }
            });

            // 点击父菜单标题时切换展开/折叠
            $('.menu-parent').click(function() {
                $(this).toggleClass('expanded collapsed');
                $(this).next('.submenu').toggleClass('expanded');
            });

            // 默认展开第一个有活动菜单项的父菜单
            $('.menu-list .menu-item.active').first().closest('ul').prev().addClass('expanded').removeClass('collapsed');
            $('.menu-list .menu-item.active').first().closest('ul').addClass('expanded');
        });
    </script>
</body>
</html> 